import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 引入mock， 仅开发环境使用
import { viteMockServe } from 'vite-plugin-mock'

// https://vite.dev/config/
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      //引入mock
      viteMockServe({
        mockPath: 'src/mock', // mock文件路径
        enable: process.env.NODE_ENV === 'development', // 开发环境才启用
        logger: true, // 是否在控制台打印mock信息
      }),

      // svg图标
      createSvgIconsPlugin({
        //指定要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ],

    //设置模块导入的路径别名
    resolve: {
      // 设置文件./src路径为 @
      alias: [
        {
          find: '@',
          replacement: path.resolve(__dirname, './src'),
        },
      ],
    },

    server: {
      host: 'localhost',
      port: 8888,
      open: true,
    },

    // scss全局变量
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/styles/variable.scss" as var;', // 使用 @use 替代 @import
        },
      },
    },
  }
})
